<template>
	<view v-if="userStore.userInfo.type == 1" class="page group-join">
		<nav-header title="群聊详情" :show-right="false">
			<template v-slot:left>
				<view v-if="from" @tap="goChat">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
				<view v-else @tap="goBack">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
			</template>
		</nav-header>
		<!-- <view class="qun-header">
			<image class="qun-bg" src="https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg"
				mode="scaleToFill"></image>
			<view class="qun-avatar">
				<image class="avatar-image" v-if="group.headImage" :src="group.headImage" lazy-load="true"
					mode="aspectFill" />
				<image class="avatar-image" v-else :src="getResource('/icon/qun-avatar-default.svg')" lazy-load="true"
					mode="aspectFill">
				</image>
				<view class="qun-name">
					{{ group.name }}
				</view>
			</view>
		</view> -->

		<view class="group-info">
			<view class="info text-sm-Regular">
				<view class="info-time">
					<text class="subtitle">群聊名称</text>
					<view>{{ group.name }}</view>
				</view>
				<view class="info-time">
					<text class="subtitle">群名和二维码</text>
					<view class="fc" @tap.stop="showCode = true">
						<text>{{group.groupNumber}}</text>
						<svg-icon icon="QR-code" :width="40"></svg-icon>
					</view>
				</view>
				<view class="ffc">
					<text class="subtitle">群介绍</text>
					<view class="jieshao" v-if="group.groupIntro">
						{{ group.groupIntro }}
					</view>
					<view class="jieshao" v-else>
						群主懒暂无设置</view>
				</view>
				<view class="ffc">
					<text class="subtitle">管理员：</text>
					<view class="user-info">
						<view v-for="item in group.adminDetails" :key="item.userId" v-if="group.adminDetails">
							<view class="gl">
								<view style="padding: 6rpx;">
									<head-image :url="item.headImage" :name="item.showNickName" :size="90"></head-image>
								</view>
								<view>
									<text>{{ item.showNickName }}</text>
								</view>
							</view>
						</view>
						<view v-else>
							暂无管理员
						</view>
					</view>
				</view>
				<!-- 	<view class="info-time">
					<text class="subtitle">群号：</text>
					<view class="info-code">
						<text>{{ group.groupNumber }}</text>
						<img :src="getResource('/icon/code.svg')" alt="" @click="goCode" class="code-img" />
					</view>
				</view> -->
				<view class="ffc">
					<text class="subtitle">群公告</text>
					<view class="jieshao" v-if="group.notice">{{ group.notice }}</view>
					<view class="jieshao" v-else>群主懒暂无设置</view>
				</view>
				<view class="info-time">
					<text class="subtitle">群地区</text>
					<view v-if="!group.address">未设置</view>
					<view v-else></view>
				</view>
				<view class="info-time">
					<text class="subtitle">建群时间</text>
					<view>{{ group.createdTime }}</view>
				</view>
			</view>
		</view>

		<view class="btn-group">
			<up-button class="btn" type="primary" @click="addGroup(groupId)"
				v-if="!haveGroup(groupId) &&group.groupType == 2">加入群聊</up-button>
			<up-button class="btn" type="primary" @click="goAdd(groupId)"
				v-if="!haveGroup(groupId) && (group.groupType == 1 || group.groupType==0 || group.groupType==3)">加入群聊</up-button>
			<up-button class="btn" @click="onSendMessage()" v-if="haveGroup(groupId)">发消息</up-button>
			<up-button class="btn" type="error" @click="onQuitGroup()" v-if="haveGroup(groupId)">退出群聊</up-button>
		</view>

		<up-popup :show="showCode" mode="center" round="8" @close="showCode = false">
			<code-popup :show="showCode" :group-data="codeParams" :group-num="memberNum" type="group"
				:share-data="share"
				:qr-url="`https://h5.dgyxy.com/pageSubOne/group/group-join?id=${groupId}&from=true`"></code-popup>
		</up-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				group: [],
				showCode: false,
				// 跳转到二维码时携带的参数
				codeParams: {},
				memberNum: 0,
				groupMembers: [],
				chatIdx: 0,
				from: null,
				share: { //分享好友
					title: '邀请你加入',
					path: '',
					imageUrl: 'https://file.dgyxy.com/resource/backgroud2.png',
					desc: '通过友星缘，加入群聊一起聊天吧',
					content: ''
				},
				glList: [{
						id: 1,
						nickName: "卢本伟卢本伟卢本伟",
						headImage: this.getResource('/icon/avatar-default.svg')
					},
					{
						id: 2,
						nickName: "彭于晏",
						headImage: this.getResource('/icon/avatar-default.svg')
					},
					{
						id: 3,
						nickName: "吴彦祖",
						headImage: this.getResource('/icon/avatar-default.svg')
					},
				]
			}
		},
		methods: {
			close(show) {
				this.showCode = show
			},
			addGroup(id) {
				let data = {
					groupId: id,
					ids: [this.userStore.userInfo.id]
				}
				this.$http({
					url: "/group/addGroupMemberByGroupId",
					method: "POST",
					data: data
				}).then(() => {
					if (this.group.groupType == 2) {
						uni.showToast({
							title: "加入官方群成功",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "加入群聊成功",
							icon: "none"
						})
					}
				})
			},
			loadGroupInfo() {
				this.$http({
					url: `/group/findGroupById/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					console.log(group)
					group.groupNumber = this.padNumber(group.groupNumber)
					this.group = group;

					this.codeParams = {
						id: this.group.id,
						title: this.group.name,
						groupType: this.group.groupType,
						groupNumber: this.group.groupNumber,
						headImage: this.group.headImage
					}
					this.memberNum = this.group.memberSize

					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);

				});
			},
			goChat() {
				uni.switchTab({
					url: "/pages/tabbar/chat"
				})
			},
			goBack() {
				uni.navigateBack()
			},
			goAdd(id) {
				let data = {
					groupId: id,
					ids: [this.userStore.userInfo.id]
				}
				this.$http({
					url: "/group/applyGroupById",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "加入群成功",
						icon: "none"
					})
				})
				// uni.navigateTo({
				// 	url: "/pageSubOne/common/group-apply?groupId=" + this.groupId
				// })
			},
			goCode() {
				uni.navigateTo({
					url: "/pageSubOne/group/group-code?id=" + this.groupId
				})
			},
			padNumber(number) {
				return number.toString().padStart(6, '0');
			},
			onSendMessage() {
				let source = null
				if (this.group.groupType == 0 || this.group.groupType == 2) {
					source = 0
				} else {
					source = 1
				}
				this.chatStore.openChatRedirect(this.chatStore.chatType.GROUP, this.groupId, {
					sourceType: source
				})
				// let chat = {
				// 	type: 'GROUP',
				// 	targetId: this.group.id,
				// 	showName: this.group.showGroupName,
				// 	headImage: this.group.headImage,
				// };
				// this.chatStore.openChat(chat);
				// let chatIdx = this.chatStore.findChatIdx(chat);
				// uni.navigateTo({
				// 	url: "/pageSubOne/chat/chat-box?chatIdx=" + chatIdx
				// })
			},
			onQuitGroup() {
				uni.showModal({
					title: '确认退出?',
					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/quit/${this.groupId}`,
							method: 'DELETE'
						}).then(() => {
							uni.showModal({
								title: `退出成功`,
								content: `您已退出群聊'${this.group.name}'`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: "/pageSubOne/group/group"
										});
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this
											.groupId);
									}, 100)
								}
							})
						});
					}
				});
			},
			haveGroup(id) {
				let groups = this.groupStore.groups
				let group = groups.find((g) => g.id == id)
				return !!group
			}
		},
		onLoad(options) {
			this.chatIdx = options.chatIdx
			this.groupId = options.id;
			this.from = options.from;
			this.share.path = `/pageSubOne/group/group-join?id=${this.groupId}&from=true`
			// 查询群聊信息	
			this.loadGroupInfo(options.id);
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	:deep(.u-transition.u-fade-enter-to.u-fade-enter-active) {
		z-index: 999 !important;
	}
	
	:deep(.u-transition.u-fade-zoom-enter-to.u-fade-zoom-enter-active) {
		z-index: 999 !important;
	}
	/* #endif */
	.qun-header {
		position: relative;

		.qun-bg {
			width: 100%;
			height: 200px;
		}

		.qun-avatar {
			width: 100%;
			height: 100%;
			top: 0%;
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx;

			.avatar-image {
				width: 65px;
				height: 65px;
				border-radius: 5px;
			}

			.qun-name {
				font-size: 30rpx;
				color: white;
			}
		}
	}

	.group-join {
		.group-info {
			width: 100%;

			.fc {
				display: flex;
				align-items: center;
				gap: 8rpx;
			}

			.ffc {
				display: flex;
				flex-direction: column;
				padding: 24rpx 0;
				gap: 16rpx;
				color: $gray-600;

				.user-info {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
				}

				.gl {
					display: flex;
					flex-direction: column;
					align-items: center;
					// flex-wrap: wrap;
					font-size: 25rpx;
					gap: 10rpx;
					// width: 140rpx;
					text-align: center;

					img {
						width: 80rpx;
						height: 80rpx;
						margin-top: 10rpx;
						padding: 8rpx;
					}

					text {
						text-align: center;
						width: 100%;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}

			.info {
				padding: 0 32rpx;

				.subtitle {
					// font-size: 30rpx;
					color: #959595;
					width: 200rpx;
				}

				.info-time {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// font-size: 30rpx;
					padding: 24rpx 0;
					width: 100%;



					.jieshao {
						width: 75%;
						text-align: left;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						color: $gray-600;
					}

					.info-code {
						display: flex;
						align-items: center;

						.code-img {
							width: 40rpx;
							height: 40rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		.btn-group {
			height: 300rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-end;
			gap: 20rpx;

			.btn {
				width: 100%;
			}
		}
	}
</style>